<template>
   <!-- echarts绘制进度条 -->
  <div class="processChart">
    <div id="process"></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from "vue";
  import * as echarts from 'echarts';

  let chartDom: HTMLElement | null = null;
  const renderChart = () => {
    chartDom = document.getElementById("process");
    const chartObj = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        max: 2000,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'category',
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: ['Mon']
      },
      series: [
        {
          name: 'Direct',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [320],
          zlevel: 2
        },
        {
          name: 'Mail Ad',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [2000]
        }
      ]
    };
    chartObj.setOption(option);
  }

  onMounted(() => {
    renderChart();
  }); 
</script>

<style lang="less" scoped>
  #process  {
    width: 500px;
    height: 500px;
    margin: 0 auto;
  }
</style>